<template>
  <div class="messages">
    <h2>留言互动</h2>
    <el-row>
      <img src="../assets/timg.gif" alt />
    </el-row>
    <el-row>
      <aplayer  :audio="audio" :customAudioType="customAudioType" :lrcType="3" />
    </el-row>
    <Comments :params="params"></Comments>
  </div>
</template>

<script>
import Hls from 'hls.js'
import Comments from "@/components/Comments";
import {getHotMusic} from '@/api/music';
let _this = this;
export default {
  name: "Message",
  components: {
    Comments,
  },
  data() {
    return {
      params: { article_id:0},
      audio: [
        {
          name: '东西（Cover：林俊呈）',
          artist: '纳豆',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
        },
        {
          name: '响喜乱舞（Cover：MARiA）',
          artist: '泠鸢yousa',
          url: 'https://cdn.moefe.org/music/mp3/kyoukiranbu.mp3',
          cover: 'https://p1.music.126.net/AUGVPQ_rVrngDH9ocQrn3Q==/109951163613037822.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/kyoukiranbu.lrc',
        },
        {
          name: '啵唧',
          artist: 'Hanser',
          url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/kiss.lrc',
        },
        {
          name: 'Let It Go.m3u8',
          artist: 'Idina Menzel',
          url: 'https://cdn.moefe.org/music/hls/frozen.m3u8',
          cover: 'https://p1.music.126.net/n72JJkPg2-ENxhB-DsZ2AA==/109951163115400390.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/frozen.lrc',
          type: 'customHls',
        }
      ],
      customAudioType: {
        customHls(audioElement, audio, player) {
          if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(audio.url);
            hls.attachMedia(audioElement);
          } else if (
            audioElement.canPlayType('application/x-mpegURL') ||
            audioElement.canPlayType('application/vnd.apple.mpegURL')
          ) {
            audioElement.src = audio.url;
          } else {
            player.showNotice('Error: HLS is not supported.');
          }
        },
      }
    };
  },
  created() {
    _this = this;
    //_this.getHotMusic()
  },
  methods: {
    getHotMusic(){
      var param = {}
      getHotMusic(param).then(res => {
        console.log(res)
        //_this.hot_music = res.data
      }) 
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.messages 
  width: 65%;
  .aplayer
    text-align left 
  h2, .el-row 
    color: #555;
    width: 100%;
    text-align: center;
    margin: 40px 0;
  

</style>
